<template>
    <div class="home">
        <navbar></navbar>
        <van-tabs v-model="big_active">
            <van-tab v-for=" (g,index) in big_genre" :title="g" :key="index">
                <van-tabs v-model="active" swipeable sticky>
                    <van-tab v-for=" (genre ,index) in genres" :title="genre.genre" :key="index">
                        <van-list
                                v-model="genre.loading"
                                :immediate-check="false"
                                :finished="genre.finished"
                                finished-text="我也是有底线的"
                                @load="onload"
                        >
                            <div class="coverParent">
                                <itemCover v-for="(item, itemIndex) in genre.list" :nowGenre_Item="item"
                                           :key="itemIndex" class="cover"></itemCover>
                            </div>
                        </van-list>
                    </van-tab>
                </van-tabs>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
    import navbar from "@/components/common/navbar.vue";
    import itemCover from "@/components/common/itemCover";

    export default {
        name: 'Home',
        data() {
            return {
                genres: {},
                active: 0,
                big_active: 0,
                big_genre: ['原创', '电视剧', '电影', '动漫', '小说']
            }
        }
        ,
        components: {
            navbar, itemCover
        },
        mounted: async function () {
            await this.getCategory()
            // await this.getItem()
        },
        methods: {
            async getCategory() {
                const res2 = await this.$http.get("/movie/genres", {params: {big_genre: this.big_genre[this.big_active]}})
                this.genres = this.changeCategory(res2.data.data)
                this.active = 0
                this.initPage()
            },
            onload: function () {
                const now_genre = this.getNowGenre();
                setTimeout(() => {
                    now_genre.page += 1
                    this.getItem();
                }, 1000)
            },
            changeCategory(data) {
                return data.map((item, index) => {
                    item.list = [];
                    item.page = 1;
                    item.finished = false;
                    item.loading = true;
                    item.pagesize = 10;
                    return item;
                });
            },
            async getItem() {
                const now_genre = this.getNowGenre();
                if (this.big_genre[this.big_active] == '小说') {
                    const items = await this.$http.get("/novel/byCate", {
                        params: {
                            start: now_genre.page,
                            size: now_genre.pagesize, category: now_genre.genre
                        }
                    });
                    const item_new = items.data.data.list
                    item_new.forEach((i) => {
                        i.big_genre = this.big_genre[this.big_active]
                    })
                    now_genre.list.push(...item_new)
                    now_genre.loading = false;
                    if (items.data.data.list.length < now_genre.pagesize) {
                        now_genre.finished = true;
                    }
                } else {
                    const items = await this.$http.get("/movie/items", {
                        params: {
                            start: now_genre.page,
                            size: now_genre.pagesize, genre: now_genre.genre
                        }
                    });
                    now_genre.list.push(...items.data.data.list)
                    now_genre.loading = false;
                    if (items.data.data.list.length < now_genre.pagesize) {
                        now_genre.finished = true;
                    }
                }
            },
            getNowGenre: function () {
                return this.genres[this.active];
            },
            initPage: function () {
                const now_genre = this.getNowGenre();
                if (!now_genre.list.length) {
                    this.getItem();
                }
            }
        },
        watch: {
            active: function () {
                this.initPage();
            },
            big_active: function () {
                this.getCategory()
            }
        }
    }
</script>
<style lang="less">
    .home {
        background-color: white;

        .coverParent {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: baseline;

            .cover {
                width: 45%;
                margin: 1.39vw 0;
            }
        }
    }

</style>
